<template>
	<view class="ayi-page">
		<navigation :isBack="true" title="在线充值" titleTintColor="#fff"><text slot="back" class="iconfont">&#xe63d;</text></navigation>
		<view v-if="isShow" class="a-account-contain">
			<view class="base-msg">
				<view class="b-m-img"></view>
				<view class="b-m-contain">
					<view class="money">
						<text>充值金额</text>
						<text class="money-num">¥{{ cardMsg.amount }}</text>
					</view>
					<view class="msg">
						<text>{{ cardMsg.first_pre }}</text>
						<text class="msg-time">{{ cardMsg.timeout }}</text>
						<text>{{ cardMsg.first_post }}</text>
					</view>
					<view class="note-msg">
						附言：
						<text class="note-msg">{{ cardMsg.note }}</text>
						<text class="note-copy" @click="copyText(cardMsg.note)">复制</text>
					</view>
				</view>
			</view>
			<view class="tip">收款账户信息</view>
			<view class="to-account">
				<view class="list-item">
					<view class="icon"><text class="iconfont" style="font-size:76rpx;">&#xe68b;</text></view>
					<view class="msg">{{ bankname(cardMsg.bankflag) }}</view>
				</view>
				<view class="list-item">
					<view class="icon"><text class="iconfont">&#xe671;</text></view>
					<view class="msg">{{ cardMsg.cardname }}</view>
					<view class="operating"><text class="o-copy" @click="copyText(cardMsg.cardname)">复制</text></view>
				</view>
				<view class="list-item">
					<view class="icon"><text class="iconfont">&#xe653;</text></view>
					<view class="msg card-no">{{ cardMsg.cardnumber }}</view>
					<view class="operating"><text class="o-copy" @click="copyText(cardMsg.cardnumber)">复制</text></view>
				</view>
				<view class="list-item">
					<view class="icon"><text class="iconfont">&#xe654;</text></view>
					<view class="msg">{{ cardMsg.location }}</view>
					<view class="operating"><text class="o-copy" @click="copyText(cardMsg.location)">复制</text></view>
				</view>
				<view class="list-item">
					<view class="icon"><text class="iconfont">&#xe65f;</text></view>
					<view class="msg">{{ cardMsg.order_no }}</view>
					<view class="operating"><text class="o-copy" @click="copyText(cardMsg.order_no)">复制</text></view>
				</view>
			</view>
			<view class="tip">持卡人信息</view>
			<view class="form-account">
				<view class="list-item">
					<view class="icon"><text class="iconfont" style="font-size:76rpx;">&#xe68b;</text></view>
					<view class="msg">{{ cardMsg.account_bankname }}</view>
				</view>
				<view class="list-item" v-if="!empty(cardMsg.account_name)">
					<view class="icon"><text class="iconfont" style="font-size:76rpx;">&#xe671;</text></view>
					<view class="msg">{{ cardMsg.account_bankname }}</view>
				</view>
			</view>
			<view class="note">
				<view>
					<text class="iconfont">&#xe72b;</text>
					温馨提示
				</view>
				<view><rich-text :nodes="cardMsg.notice"></rich-text></view>
			</view>
		</view>
		<view v-if="!isShow" class="a-account-contain">
			<view class="note">
				<view><rich-text :nodes="errorMsg"></rich-text></view>
			</view>
		</view>
		<Tabbar :indexpage="-1"></Tabbar>
	</view>
</template>

<script>
import { Tools, Config, URL, Net, VueTools } from '@/common/tools.js';
import navigation from '@/components/navigation.vue';
import Tabbar from '@/components/tabbar.vue';
export default {
	components: { Tabbar, navigation },
	data() {
		return {
			money: 0,
			channel_way_id: '',
			origin: '',
			account_name: '',
			cardMsg: {
				amount: '',
				bankflag: '',
				cardnumber: '',
				cardname: '',
				location: '',
				note: '',
				order_no: '',
				timeout: '',
				notice: '',
				first_pre: '',
				first_post: '',
				account_bankname: '',
				account_name: ''
			},
			errorMsg: '',
			isShow: false,
			timerArr: [] //计时器
		};
	},
	onLoad(option) {
		let tempP = Tools.paramAESDecrypt(decodeURIComponent(option.p));
		if (Tools.isEmpty(tempP)) {
			this.isShow = false;
			this.errorMsg = '非法操作...';
		} else {
			let paramsObj = JSON.parse(tempP);
			this.money = parseInt(paramsObj.num);
			this.channel_way_id = paramsObj.wid;
			this.origin = paramsObj.code;
			this.account_name = paramsObj.account_name;
			this.payNet();
		}
	},
	methods: {
		/**
		 * 复制文本
		 * @param {Object} val 复制的数据对象
		 */
		copyText(val) {
			//#ifndef H5
			uni.setClipboardData({
				data: val,
				success: function() {
					VueTools.toastNo('复制成功');
				},
				fail: function() {
					VueTools.toastNo('复制失败');
				}
			});
			//#endif
			//#ifdef H5
			let res = Tools.h5Copy(val);
			if (res === true) {
				VueTools.toastNo('复制成功');
			} else {
				VueTools.toastNo('复制失败');
			}
			//#endif
		},
		payNet(money, channel_way_id, origin, account_name) {
			let that = this;
			this.clearTimerArr();
			Net.ayiHttp(
				URL.OTHER_INCASH2,
				'{"money":"' +
					this.money +
					'","channel_way_id":"' +
					this.channel_way_id +
					'","origin":"' +
					this.origin +
					'","version":"2","account_name":"' +
					this.account_name +
					'"}',
				function(res) {
					if (res.code == Config.SUCCESS_CODE) {
						//成功的逻辑
						let resData = Tools.aesDecodeToJson(res.data);
						console.log('支付成功的数据================:', resData);
						if (Tools.isEmpty(resData.data) || resData.data.length <= 0) {
							that.isShow = false;
							that.cardMsg = {
								amount: '',
								bankflag: '',
								cardnumber: '',
								cardname: '',
								location: '',
								note: '',
								order_no: '',
								timeout: '',
								notice: '',
								first_pre: '',
								first_post: '',
								account_bankname: '',
								account_name: ''
							};
							that.errorMsg = resData.message;
							//that.clearT();
						} else {
							that.isShow = true;
							that.cardMsg = {
								amount: resData.data.amount,
								bankflag: resData.data.card.bankflag,
								cardnumber: resData.data.card.cardnumber,
								cardname: resData.data.card.cardname,
								location: resData.data.card.location,
								note: resData.data.note,
								order_no: resData.data.order_no,
								timeout: resData.data.timeout,
								notice: resData.data.notice,
								first_pre: resData.data.first_pre,
								first_post: resData.data.first_post,
								account_bankname: resData.data.account_bankname,
								account_name: resData.data.account_name
							};
							that.countFun();
						}
					} else if (res.code == Config.FAIL_CODE) {
						VueTools.toastNo(res.message);
					} else if (res.code == Config.LOGIN_CODE) {
						uni.navigateTo({
							url: '/pages/my/login/login'
						});
					}
				},
				function(err) {
					console.log('error:', err);
				}
			);
		},
		/**
		 * 倒计时的处理
		 */
		countFun() {
			let that = this;
			//this.cardMsg.timeout
			let tempTime = this.cardMsg.timeout;
			let tempTimer = setInterval(function() {
				tempTime--;
				if (tempTime <= 0) {
					clearInterval(tempTimer);
					that.cardMsg.timeout = '订单已关闭';
				} else {
					that.cardMsg.timeout = Tools.formateTime(tempTime, true);
				}
			}, 1000);
			this.timerArr.push(tempTimer);
		},
		/**
		 * 清除计时器的
		 */
		clearTimerArr() {
			for (let item in this.timerArr) {
				clearInterval(this.timerArr[item]);
			}
			this.timerArr = [];
		},
		bankname(valCode) {
			return Tools.getBankNameByCode(valCode);
		}
	},
	onUnload() {
		this.clearTimerArr();
	},
	destroyed() {
		this.clearTimerArr();
	}
};
</script>

<style lang="scss">
.a-account-contain {
	position: relative;
	z-index: 0;
}
.base-msg,
.tip,
.to-account,
.form-account,
.note {
	margin: 0px 20rpx;
}
.base-msg {
	background: linear-gradient(to bottom, #fd5e63, #ea3a5e);
	height: 300rpx;
	border-radius: 20rpx;
	margin: 40rpx 20rpx;
	position: relative;
	font-size: 28rpx;
	.b-m-img {
		background: url('/static/img/wallet_card_bg.png') no-repeat;
		background-size: cover;
		height: 100%;
		width: 100%;
		position: absolute;
		z-index: 0;
	}
	.b-m-contain {
		padding: 40rpx;
		z-index: 10;
		position: relative;
	}
	.money {
		color: #fff;
		margin: 0px 40rpx 40rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-weight: bold;
		.money-num {
			font-size: 40rpx;
			margin-left: 40rpx;
		}
	}
	.msg {
		color: #fff;
		margin-bottom: 20rpx;
		.msg-time {
			font-weight: 700;
			color: #004f9c;
			font-size: 14px;
		}
	}
	.note-msg {
		color: #fff;
		.note-msg {
			font-size: 14px;
			font-weight: 700;
		}
		.note-copy {
			background: linear-gradient(to right, #ffab8c, #fd7a45);
			padding: 6rpx 20rpx;
			border-radius: 40rpx;
			margin-left: 20rpx;
		}
	}
}
.list-item {
	display: flex;
	flex-direction: row;
	align-items: center;
	border-bottom: 1px solid #e8e9ec;
	height: 100rpx;
	font-size: 34rpx;
	margin: 0px 20rpx;
	.iconfont {
		font-size: 68rpx;
		color: #004f9c;
	}
	.icon,
	.msg,
	.operating {
		height: 100%;
		display: flex;
		align-items: center;
	}
	.icon {
		border-bottom: 1px solid #fff;
		flex: 60;
		justify-content: center;
	}
	.msg {
		flex: 230;
		&.card-no {
			font-size: 24rpx;
		}
	}
	.operating {
		flex: 60;
		font-size: 26rpx;
		justify-content: center;
		.o-copy {
			background: linear-gradient(to right, #fe9d78, #eb3c5e);
			padding: 4rpx 10rpx;
			border-radius: 40rpx;
			color: #fff;
		}
	}
}
.note {
	border-radius: 20rpx;
	border: 1px solid #e8e9ec;
	margin-top: 40rpx;
	padding: 40rpx;
	font-size: 28rpx;
	color: #666;
	.iconfont {
		color: #eb3c5e;
		font-weight: bold;
	}
	p {
		margin-left: 0;
		margin-right: 0;
		margin-top: 0;
		margin-bottom: 4rpx;
		font-size: 28rpx;
	}
}
.tip {
	font-size: 32rpx;
	border-bottom: 1px solid #e8e9ec;
	padding: 20rpx 0px;
}
</style>
